<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
  <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
  <style type="text/css">
      .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        background-image: none !important;
        width: 95px;
        height: 30px;
        margin-top: 0;
        text-decoration: none;
        border: none;
        outline: none;
        left: 40%;
        background: #fff;
        border-radius: 50px;
        border:1px solid #b4b4b4;
        top: auto;
        bottom:3%;
        opacity: 1;
        text-align: center;
        color: #b4b4b4;
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        background-image: none !important;
        width: 95px;
        height: 30px;
        margin-top: 0;
        text-decoration: none;
        border: none;
        right: 40%;
        outline: none;
        background: #fff;
        border-radius: 50px;
        border:1px solid #b4b4b4;
        top: auto;
        bottom: 3%;
        opacity: 1;
        text-align: center;
        color: #b4b4b4;
    }

    .swiper-button-prev i, .swiper-button-next i{
        font-size: 20px;
        line-height: 30px;
    }
    .swiper-button-prev:hover, .swiper-button-next:hover{
        background: #468ffc;
        border:1px solid #7aafff;
        color: #fff;
    }
  </style>
</head>
<body>
    <!-- banner_tiele -->
	<div class="mobile_title">
        <div class="mobile_title_name">
            <span class="mobile_title_name_span">多平台 分用户定制化移动应用</span>
            <p>量身打造 总有一款适合你</p>
        </div>
    </div>


    <!-- 天气在线公众号 -->
    <div class="mobile_wechat">
        <div class="mobile_wechat_nr">
            <div class="index_title">
                <p class="index_title_xian_left"></p>
                <span class="index_title_name">天气在线公众号</span>
                <p class="index_title_xian_right"></p>
                <div class="title_xq">
                    <p>天气公众号简介说明</p>
                </div>
            </div>
            <div class="mobile_wechat_zong">
                <div class="mobile_banner swiper-container swiper-no-swiping">
                    <ul class="swiper-wrapper">
                        <li class="swiper-slide">
                            <img src="images/mobile_img1.png">
                        </li>
                        <li class="swiper-slide swiper-slide-active">
                            <img src="images/mobile_img2.png">
                        </li>
                        <li class="swiper-slide">
                            <img src="images/mobile_img3.png">
                        </li>
                    </ul>
                </div>
                <div class="mobile_wechat_content">
                    <ul>
                        <li>
                            <i>◆</i><span>简洁功能页面，信息一目了然</span>
                        </li>
                        <li>
                            <i>◆</i><span> 天气在线预数据，专业、精准</span>
                        </li>
                        <li>
                            <i>◆</i><span> 免费常规预报数据</span>
                        </li>
                        <li>
                            <i>◆</i><span> 72H逐消失/15D逐日预报</span>
                        </li>
                        <li>
                            <i>◆</i><span> 专属天气推送</span>
                        </li>
                        <li>
                            <i>◆</i><span> 7种预报要素</span>
                        </li>
                    </ul>
                    <img class="mobile_wechat_content_ewm" src="images/ewm1.png">
                </div>
            </div>
        </div>
    </div>


    <!-- 天气在线App -->
    <div class="app">
        <div class="app_nr">
            <div class="app_download">
                <div class="app_download_title">
                    <span>天气在线APP</span>
                    <p>更专业的气象服务</p>
                </div>
                <div class="download_list">
                    <ul>
                        <li>
                            <span>Andioid</span>
                            <div class="download_list_ewm">
                                <img src="images/ewm.png">
                            </div>
                        </li>
                        <li>
                            <span>IOS</span>
                            <div class="download_list_ewm">
                                <img src="images/ewm.png">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="app_banner swiper-container  swiper-no-swiping">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <img src="images/mobile_img1.png">
                    </li>
                    <li class="swiper-slide swiper-slide-active">
                        <img src="images/mobile_img2.png">
                    </li>
                    <li class="swiper-slide">
                        <img src="images/mobile_img3.png">
                    </li>
                    <li class="swiper-slide swiper-slide-active">
                        <img src="images/mobile_img2.png">
                    </li>
                    <li class="swiper-slide">
                        <img src="images/mobile_img3.png">
                    </li>
                    <li class="swiper-slide">
                        <img src="images/mobile_img1.png">
                    </li>
                    <li class="swiper-slide swiper-slide-active">
                        <img src="images/mobile_img2.png">
                    </li>
                    <li class="swiper-slide">
                        <img src="images/mobile_img3.png">
                    </li>
                    <li class="swiper-slide swiper-slide-active">
                        <img src="images/mobile_img2.png">
                    </li>
                    <li class="swiper-slide">
                        <img src="images/mobile_img3.png">
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 天气插件 -->
    <div class="move">
        <div class="move_nr">
            <div class="index_title">
                <p class="index_title_xian_left"></p>
                <span class="index_title_name">移动应用定制开发</span>
                <p class="index_title_xian_right"></p>
            </div>

            <div class="move_zong">
                <div class="move_content">
                    <ul>
                        <li>
                            <img class="move_img" src="images/move_list1.png">
                            <span>多平台定制</span>
                            <p>支持微信、Android、IOS、钉钉</br>等主流平台应用</p>
                        </li>
                        <li>
                            <img class="move_img" src="images/move_list2.png">
                            <span>行业定制</span>
                            <p>针对气象、水利、国土、服装、水电</br>等行业提供专业解决方案</p>
                        </li>
                        <li>
                            <img class="move_img" src="images/move_list3.png">
                            <span>场景定制</span>
                            <p>业务平台、公共服务平台等</br>多场景定制服务</p>
                        </li>
                        <li>
                            <img class="move_img" src="images/move_list4.png">
                            <span>目标导向</span>
                            <p>业务平台、公共服务平台等</br>多场景定制服务</p>
                        </li>
                    </ul>
                </div>

                <!-- 定制开发联系信息 -->
                <div class="development_info_box" style="background: #f6f7f9;">
                    <div class="development_info">
                        <img src="images/development_user.png" >
                        <p>定制化开发联系：<span>周先生PM</span></p>
                    </div>
                    <div class="development_info">
                        <img src="images/development_phone.png" >
                        <p>M/T：<span>189967383720    023-68071292</span></p>
                    </div>
                    <div class="development_info">
                        <img src="images/development_email.png" >
                        <p>Mail：<span>T7ol@zxl.com</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 合作伙伴 -->
    <div class="cooperation">
        <div class="cooperation_nr">
            <span class="cooperation_title">合作伙伴</span>
            <div class="cooperation_content swiper-container  swiper-no-swiping">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide cooperation_top">
                        <img class="cooperation_list_img" src="images/cooperation_list1.png">
                        <div class="zz"></div>
                        <div class="cooperation_list_nr">
                            <div class="sjx"></div>
                            <div class="cooperation_list_nr_title">
                                <img src="images/qx_logo1.png">
                                <span>贵阳市气象局</span>
                            </div>
                            <p class="cooperation_list_nr_title_p">我公司与贵阳市气象局合作开发的“天景在线”微信小程序与APP，部分数据使用“天气在线”数据超市数据，实现“气象+旅游”的融合，2020年6月上先以来，获得广大用。</p>
                        </div>
                    </li>
                    <li class="swiper-slide cooperation_bottom">
                        <div class="cooperation_list_nr">
                            <div class="sjx"></div>
                            <div class="cooperation_list_nr_title">
                                <img src="images/qx_logo1.png">
                                <span>贵阳市气象局</span>
                            </div>
                            <p class="cooperation_list_nr_title_p">我公司与贵阳市气象局合作开发的“天景在线”微信小程序与APP，部分数据使用“天气在线”数据超市数据，实现“气象+旅游”的融合，2020年6月上先以来，获得广大用。</p>
                        </div>
                        <div class="zz"></div>
                        <img class="cooperation_list_img" src="images/cooperation_list2.png">
                    </li>
                    <li class="swiper-slide cooperation_top">
                        <img class="cooperation_list_img" src="images/cooperation_list3.png">
                        <div class="zz"></div>
                        <div class="cooperation_list_nr">
                            <div class="sjx cooperation_top"></div>
                            <div class="cooperation_list_nr_title">
                                <img src="images/qx_logo1.png">
                                <span>贵阳市气象局</span>
                            </div>
                            <p class="cooperation_list_nr_title_p">我公司与贵阳市气象局合作开发的“天景在线”微信小程序与APP，部分数据使用“天气在线”数据超市数据，实现“气象+旅游”的融合，2020年6月上先以来，获得广大用。</p>
                        </div>
                    </li>
                    <li class="swiper-slide cooperation_bottom">
                        <div class="cooperation_list_nr">
                            <div class="sjx cooperation_bottom"></div>
                            <div class="cooperation_list_nr_title">
                                <img src="images/qx_logo1.png">
                                <span>贵阳市气象局</span>
                            </div>
                            <p class="cooperation_list_nr_title_p">我公司与贵阳市气象局合作开发的“天景在线”微信小程序与APP，部分数据使用“天气在线”数据超市数据，实现“气象+旅游”的融合，2020年6月上先以来，获得广大用。</p>
                        </div>
                        <div class="zz"></div>
                        <img class="cooperation_list_img" src="images/cooperation_list4.png">
                    </li>
                    <li class="swiper-slide cooperation_top">
                        <img class="cooperation_list_img" src="images/cooperation_list1.png">
                        <div class="zz"></div>
                        <div class="cooperation_list_nr">
                            <div class="sjx cooperation_top"></div>
                            <div class="cooperation_list_nr_title">
                                <img src="images/qx_logo1.png">
                                <span>贵阳市气象局</span>
                            </div>
                            <p class="cooperation_list_nr_title_p">我公司与贵阳市气象局合作开发的“天景在线”微信小程序与APP，部分数据使用“天气在线”数据超市数据，实现“气象+旅游”的融合，2020年6月上先以来，获得广大用。</p>
                        </div>
                    </li>
                    <li class="swiper-slide cooperation_bottom">
                        <div class="cooperation_list_nr">
                            <div class="sjx cooperation_bottom"></div>
                            <div class="cooperation_list_nr_title">
                                <img src="images/qx_logo1.png">
                                <span>贵阳市气象局</span>
                            </div>
                            <p class="cooperation_list_nr_title_p">我公司与贵阳市气象局合作开发的“天景在线”微信小程序与APP，部分数据使用“天气在线”数据超市数据，实现“气象+旅游”的融合，2020年6月上先以来，获得广大用。</p>
                        </div>
                        <div class="zz"></div>
                        <img class="cooperation_list_img" src="images/cooperation_list2.png">
                    </li>
                </ul>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"><i class="fa fa-long-arrow-right"></i></div>
            <div class="swiper-button-prev"><i class="fa fa-long-arrow-left"></i></div>
        </div>
    </div>


</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript" src="js/swiper4.min.js"></script>
<script type="text/javascript">
	$(function(){ 
        // mobile 轮播
        var swiper1 = new Swiper('.mobile_banner', {
            slidesPerView: 3,
            spaceBetween: 0,
            centeredSlides: true,
            loop:true,
            autoplay:{
                delay: 3000,
                disableOnInteraction: false,
            },
        });


        // mobile 轮播
        var swiper2 = new Swiper('.app_banner', {
            slidesPerView: 6,
            spaceBetween: 0,
            centeredSlides: false,
            loop:true,
            autoplay:{
                delay: 2500,
                disableOnInteraction: false,
            },
        });

        var swiper3 = new Swiper('.cooperation_content', {
            slidesPerView: 4,
            spaceBetween: 11,
            centeredSlides: false,
            loop:true,
            // autoplay:{
      //            delay: 3000,
         //        disableOnInteraction: false,
         //    },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });


        // 下载切换
        $('.download_list ul li').hover(function(){
            $(this).find('.download_list_ewm').show();
            $(this).siblings().find('.download_list_ewm').hide();
        },function(){

        });
    })
    
	/*引用layui*/
	layui.use(['form', 'layedit', 'laydate','element','layer'], function(){
      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate
      ,$ = layui.jquery
      ,element = layui.element;
    })

	
</script>
</html>	